<template>
  <BasicModal v-bind="$attrs" @ok="onSubmit" @register="registerModal" @cancel="handleClose" destroyOnClose title="关闭订单" :width="600" :height="300">
    <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState.data"
      :rules="rules"
      v-bind="layout"
      @finish="handleFinish"
      @validate="handleValidate"
      @finishFailed="handleFinishFailed"
    >
      <a-form-item has-feedback label="关闭数量" name="orderQuantity">
        <a-input-number v-model:value="formState.data.orderQuantity" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
  
  <script lang="ts" setup>
import { reactive, ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue';
import { closeNumber } from './../BusOrderCenter.api';

let ableProductQuantity = 0;
//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  ableProductQuantity = data.row.ableProductQuantity;
  formState.data.id = data.row.id
  console.log(data.row);
});
const handleFinish = (values: FormState) => {
  console.log(values, formState);
};
const handleFinishFailed = (errors) => {
  console.log(errors);
};
const formState = reactive({ data: { orderQuantity: '',id: '' } });
let checkOrderQuantity = async (_rule: Rule, value: number) => {
  if (!value) {
    return Promise.reject('关闭数量不能为空');
  }
  if (!Number.isInteger(value)) {
    return Promise.reject('请输入数字');
  } else {
    if (value > ableProductQuantity) {
      return Promise.reject('关闭数量不能大于订单数量');
    } else {
      return Promise.resolve();
    }
  }
};
const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
const rules: Record<string, Rule[]> = {
  orderQuantity: [{ required: true, trigger: 'change' }],
};
const handleValidate = (...args) => {
  console.log(args);
};
const formRef = ref<FormInstance>();
const resetForm = () => {
  formRef.value.resetFields();
};
const handleClose = () => {
  resetForm();
};
const emit = defineEmits(['success']);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      closeNumber(formState.data).then(res => {
        // console.log(res);
        closeModal()
        emit('success')
      })
      // console.log('values', formState, toRaw(formState));
    })
    .catch((error) => {
      console.log('error', error);
    });
};
</script>
  
  <style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}
</style>